/**********
***********
|
| This is designed mobile first, with media queries for larger screens.
|
***********
***********/

/*     Font Declarations
_________________________*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@font-face {
  font-family: "JBU-Custom";
  src: url("https://jbu_ftp.sidearmsports.com/custompages/fonts/JBU Bold Font.ttf");
}

/*  
    To reference fonts, use the following:

        font-family: 'Oswald', sans-serif;
        font-family: 'Roboto', sans-serif;
*/

/*     Global Styles
_________________________*/

body {
  background-image: url("https://jbu_ftp.sidearmsports.com/custompages/css/gameday/background-blue-repeat.jpg");
  background-repeat: repeat;
  background-color: #eeeef0;
}

.gameday-dashboard *:not(i),
.gameday-dashboard *:not(i)::before,
.gameday-dashboard *:not(i)::after {
  word-wrap: break-word;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Oswald", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.gameday-dashboard ul {
  list-style-type: none;
  padding: 0;
}

.gameday-dashboard a,
.gameday-dashboard a:link,
.gameday-dashboard a:visited {
  text-decoration: none;
}

.gameday-dashboard .menu-item a,
.gameday-dashboard .menu-item a:link,
.gameday-dashboard .menu-item a:visited {
  color: currentColor;
}

.gameday-dashboard .grid-content_item a,
.gameday-dashboard .grid-content_item a:link,
.gameday-dashboard .grid-content_item a:visited {
  color: #124e84;
}

/* 
    Global notes:
        Blue:   #124E84
        Yellow: #F9CA24
        Black:  #161313
*/

/*     Shared Styles
_________________________*/

.section-two,
.section-three,
.section-four {
  margin: 0;
  clear: both;
  padding-top: 24px;
}

.section-header {
  border-left: 6px solid #f9ca24;
  background: #124e84;
  color: white;
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 8px 10px 8px 12px;
}

.section-header-news {
  border-left: 6px solid #f9ca24;
  background: #124e84;
  color: white;
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 8px 10px 8px 12px;
}

.grid-content_item .section-header {
  margin: 0 0 4px;
}

.section-header.full-size {
  font-size: 2rem;
  padding: 15px 15px 15px 20px;
  width: 100%;
  font-family: "Roboto", sans-serif;
}

.section-header.full-size .callout {
  font-style: italic;
  color: #f9ca24;
  font-weight: 400;
  padding-left: 7px;
  display: inline-block;
}

.section-header.full-size.xl,
.section-header.full-size.xl span {
  border-width: 0;
  font-size: clamp(100%, 1.5rem + 2vw, 38px);
  margin-bottom: 20px;
  padding: 15px 15px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 10px;
  line-height: 48px;
}

.section-header.full-size.xl span {
  color: #f9ca24;
  padding: 0;
}

/*     Responsive Layout Tiers
       Desktop: 1074px and wider
       Tablet:  768px through 1073px
       Mobile:  767px and narrower

       Narrower breakpoints later in this file are component-specific
       refinements within the mobile tier.
_________________________*/

/*     Section One - Gameday Header, Video, Latest News
_________________________*/

.section-one {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* Gameday Header */
.gameday-header {
  --gameday-header-pad-x: 34px;

  position: relative;
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
  padding: 10px var(--gameday-header-pad-x) 0;
  background: transparent;
  color: #124e84;
}

@media only screen and (min-width: 1074px) {
  .gameday-header {
    order: 1;
  }
}

.gameday-header .away-container,
.gameday-header .home-container {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}

/* ESPN-inspired team identity: logos stay on the outer edges, while
   team names and records sit inward toward the score. */
.gameday-header .team-logo {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  min-width: 104px;
  min-height: 104px;
  margin: 0;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

/* ESPN-style corner washes are anchored to the matchup header itself,
   not to the logo boxes. This keeps the color fixed in the true outer
   corners as the logos move at tablet/mobile widths. */
.gameday-header::before,
.gameday-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  width: 220px;
  height: 116px;
  pointer-events: none;
}

.gameday-header::before {
  left: 0;
  background: radial-gradient(
    ellipse 185px 88px at top left,
    color-mix(in srgb, var(--opponent-color, #8b1b3f) 43%, transparent) 0%,
    color-mix(in srgb, var(--opponent-color, #8b1b3f) 23%, transparent) 30%,
    color-mix(in srgb, var(--opponent-color, #8b1b3f) 9%, transparent) 56%,
    color-mix(in srgb, var(--opponent-color, #8b1b3f) 2.5%, transparent) 76%,
    transparent 100%
  );
}

.gameday-header::after {
  right: 0;
  background: radial-gradient(
    ellipse 185px 88px at top right,
    color-mix(in srgb, var(--jbu-color, #124e84) 43%, transparent) 0%,
    color-mix(in srgb, var(--jbu-color, #124e84) 23%, transparent) 30%,
    color-mix(in srgb, var(--jbu-color, #124e84) 9%, transparent) 56%,
    color-mix(in srgb, var(--jbu-color, #124e84) 2.5%, transparent) 76%,
    transparent 100%
  );
}

.gameday-header > * {
  position: relative;
  z-index: 1;
}

.gameday-dashboard .team-logo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.gameday-dashboard .team-logo img:hover {
  transform: scale(1.045);
}

.team-identity {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  font-family: "Roboto", sans-serif;
}

.team-identity-away {
  margin-left: 24px;
  align-items: flex-end;
  text-align: right;
}

.team-identity-home {
  margin-right: 24px;
  align-items: flex-start;
  text-align: left;
}

.team-name {
  max-width: 220px;
  overflow: hidden;
  color: #161313;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-record {
  margin-top: 3px;
  color: #6b7177;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* Full-width team navigation rail below the matchup header. */
.gameday-team-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: auto;
  margin: 8px calc(-1 * var(--gameday-header-pad-x)) 0;
  padding: 0 var(--gameday-header-pad-x);
  border-top: 1px solid #d7dadd;
  border-bottom: 1px solid #d7dadd;
  background: rgba(255, 255, 255, 0.82);
}

.gameday-header .team-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

.gameday-header .team-menu.away {
  justify-content: flex-start;
  text-align: left;
}

.gameday-header .team-menu.home {
  justify-content: flex-end;
  text-align: right;
}

.gameday-header .team-menu.away {
  --team-accent: var(--opponent-color, #8b1b3f);
}

.gameday-header .team-menu.home {
  --team-accent: var(--jbu-color, #124e84);
}

.gameday-header .team-menu .menu-item {
  position: relative;
  display: block;
  margin: 0;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.gameday-header .team-menu .menu-item a,
.gameday-header .team-menu .menu-item a:link,
.gameday-header .team-menu .menu-item a:visited {
  position: relative;
  display: block;
  padding: 13px 12px 12px;
  color: #5e6368;
  font-family: "Roboto", sans-serif !important;
  transition: color 0.18s ease;
}

.gameday-header .team-menu.away .menu-item:first-child a {
  padding-left: 0;
}

.gameday-header .team-menu.home .menu-item:last-child a {
  padding-right: 0;
}

.gameday-header .team-menu .menu-item::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  background: var(--team-accent, #124e84);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.gameday-header .team-menu.away .menu-item:first-child::after {
  left: 0;
}

.gameday-header .team-menu.home .menu-item:last-child::after {
  right: 0;
}

.gameday-header .team-menu .menu-item:hover::after,
.gameday-header .team-menu .menu-item:focus-within::after {
  transform: scaleX(1);
}

.gameday-header .team-menu .menu-item:hover a,
.gameday-header .team-menu .menu-item:focus-within a {
  color: #161313;
}

.gameday-header .team-menu .menu-item a:focus-visible {
  outline: 2px solid var(--team-accent, #124e84);
  outline-offset: -2px;
}

/* Pregame / Live Volleyball Scoreboard */
.gameday-dashboard .gameday-scoreboard,
.gameday-dashboard .gameday-scoreboard * {
  font-family: "Roboto", sans-serif;
}

.gameday-scoreboard {
  width: 100%;
  max-width: 410px;
  min-width: 0;
  justify-self: center;
  color: #161313;
}

.gameday-scoreboard [hidden] {
  display: none !important;
}

.scoreboard-pregame {
  display: flex;
  min-height: 102px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scoreboard-pregame-date {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.scoreboard-pregame-time {
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.15;
}

.scoreboard-pregame-broadcast {
  margin-top: 7px;
  padding: 2px 6px;
  border: 1px solid #c9cdd1;
  border-radius: 4px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.scoreboard-live {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  column-gap: 12px;
  align-items: center;
  width: 100%;
}

.scoreboard-match-score {
  position: relative;
  color: #161313;
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Final-score winner marker. The arrow sits on the inside edge of the
   winning score and points outward toward that team's identity block. */
.scoreboard-match-score-opponent.is-winner::after,
.scoreboard-match-score-jbu.is-winner::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.scoreboard-match-score-opponent.is-winner::after {
  right: -12px;
  border-right: 7px solid #161313;
}

.scoreboard-match-score-jbu.is-winner::before {
  left: -12px;
  border-left: 7px solid #161313;
}

.scoreboard-live-center {
  min-width: 0;
}

.scoreboard-state {
  display: table;
  margin: 0 auto 6px;
  padding: 2px 6px;
  border: 1px solid #c9cdd1;
  border-radius: 4px;
  background: #fff;
  color: #161313;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.scoreboard-linescore {
  display: grid;
  grid-template-columns: 12px minmax(48px, auto) repeat(5, 28px);
  column-gap: 4px;
  row-gap: 3px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.linescore-gutter {
  display: flex;
  width: 12px;
  height: 15px;
  align-items: center;
  justify-content: center;
}

.linescore-serve-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #124e84;
  visibility: hidden;
}

.linescore-team-heading,
.linescore-set-heading {
  color: #6b7177;
  font-size: 0.66rem;
  font-weight: 500;
  text-align: center;
}

.linescore-divider {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  margin: 1px 0 2px;
  background: rgba(22, 19, 19, 0.16);
}

.linescore-team {
  min-width: 48px;
  overflow: hidden;
  color: #161313;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.linescore-score {
  min-width: 28px;
  color: #161313;
  font-weight: 500;
  text-align: center;
}

@media only screen and (max-width: 1073px) {
  /* Tablet and mobile use the logos as the outer team identifiers. */
  .gameday-header .team-identity {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1073px) {
  .gameday-header {
    --gameday-header-pad-x: 18px;
    order: 1;
    grid-template-columns: minmax(110px, 1fr) minmax(390px, 430px) minmax(110px, 1fr);
    gap: 12px;
  }


  .gameday-header .away-container {
    justify-content: flex-start;
  }

  .gameday-header .home-container {
    justify-content: flex-end;
  }

  .gameday-header::before,
  .gameday-header::after {
    width: 178px;
    height: 104px;
  }

  .scoreboard-live {
    column-gap: 24px;
  }

  .gameday-header .team-logo {
    flex-basis: 92px;
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
  }


  .gameday-dashboard .team-logo img {
    width: 88px;
    height: 88px;
  }

  .team-identity-away {
    margin-left: 14px;
  }

  .team-identity-home {
    margin-right: 14px;
  }

  .team-name {
    max-width: 170px;
    font-size: 0.9rem;
  }

  .gameday-header .team-menu .menu-item {
    font-size: 0.68rem;
  }

  .gameday-header .team-menu .menu-item a {
    padding-right: 9px;
    padding-left: 9px;
  }
}

/* Wide mobile / narrow tablet: keep the matchup on one horizontal line.
   The page-wide tier is still mobile below 768px, but this component can
   remain scoreboard-like until space truly requires stacking. */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .gameday-header {
    --gameday-header-pad-x: 10px;
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    grid-template-areas:
      "away score home"
      "nav nav nav";
    gap: 8px 14px;
    padding-top: 10px;
  }

  .gameday-header .away-container {
    grid-area: away;
    justify-content: flex-start;
  }

  .gameday-header .home-container {
    grid-area: home;
    justify-content: flex-end;
  }

  .gameday-scoreboard {
    grid-area: score;
    max-width: 410px;
  }

  .gameday-team-nav {
    grid-area: nav;
    margin-top: 2px;
  }

  /* Give the corner wash enough room to fade fully before the
     pseudo-element edge so it never reads as a rectangular block. */
  .gameday-header::before,
  .gameday-header::after {
    width: 205px;
    height: 100px;
  }

  .gameday-header .team-logo {
    flex-basis: 76px;
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
  }

  .gameday-dashboard .team-logo img {
    width: 72px;
    height: 72px;
  }

  .gameday-header .team-menu .menu-item {
    font-size: 0.6rem;
  }

  .gameday-header .team-menu .menu-item a {
    padding: 11px 6px 10px;
  }

  .scoreboard-live {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    column-gap: 16px;
  }

  .scoreboard-match-score {
    font-size: 2.55rem;
  }

  /* At 600–767px, keep the final winner marker visually attached to
     the big set score instead of letting it drift toward the linescore. */
  .scoreboard-match-score-opponent.is-winner::after {
    right: -7px;
  }

  .scoreboard-match-score-jbu.is-winner::before {
    left: -7px;
  }

  .scoreboard-linescore {
    grid-template-columns: 12px minmax(44px, auto) repeat(5, minmax(24px, 1fr));
    column-gap: 2px;
  }

  .gameday-dashboard .more-info-content {
    padding-bottom: 20px;
  }
}

/* Small-screen three-level scoreboard:
   1) team logos
   2) big set scores flanking the match state + linescore
   3) team links */
@media only screen and (max-width: 599px) {
  .gameday-header {
    --gameday-header-pad-x: 10px;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    grid-template-rows: auto auto auto;
    gap: 0 10px;
    padding-top: 10px;
  }

  .gameday-header .away-container {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
  }

  .gameday-header .home-container {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
  }

  /* Let the live-score pieces participate directly in the header grid. */
  .gameday-scoreboard,
  .scoreboard-live {
    display: contents;
  }

  .scoreboard-pregame {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    min-height: 0;
    padding: 8px 0 11px;
  }

  .scoreboard-match-score-opponent {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

  .scoreboard-live-center {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding: 8px 0 11px;
  }

  .scoreboard-match-score-jbu {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: center;
  }

  .gameday-team-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
  }

  /* Keep the corner wash layer larger than the radial gradient itself so
     the color reaches full transparency before the pseudo-element edge.
     This prevents a visible rectangular cutoff on small screens. */
  .gameday-header::before,
  .gameday-header::after {
    width: 205px;
    height: 100px;
  }

  .gameday-header .team-logo {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
  }

  .gameday-dashboard .team-logo img {
    width: 66px;
    height: 66px;
  }

  .gameday-header .team-menu .menu-item {
    font-size: 0.6rem;
  }

  .gameday-header .team-menu .menu-item a {
    padding: 11px 6px 10px;
  }

  .scoreboard-match-score {
    font-size: 2.45rem;
  }

  .scoreboard-state {
    margin-bottom: 6px;
  }

  .scoreboard-linescore {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    grid-template-columns: 12px minmax(44px, auto) repeat(5, minmax(24px, 1fr));
    column-gap: 2px;
  }

  .gameday-dashboard .more-info-content {
    padding-bottom: 20px;
  }
}

/* Final compact-phone scoreboard treatment. Below 480px the matchup
   becomes two functional levels: compact logos/scores/state on top,
   then the linescore beneath a thin divider. Team links are hidden. */
@media only screen and (max-width: 479px) {
  .gameday-header {
    --gameday-header-pad-x: 8px;
    grid-template-columns: 58px 42px minmax(88px, 1fr) 42px 58px;
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 0;
    padding-top: 8px;
  }

  .gameday-header .away-container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-content: flex-start;
  }

  .gameday-header .home-container {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    justify-content: flex-end;
  }

  .gameday-header .team-logo {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
  }

  .gameday-dashboard .team-logo img {
    width: 52px;
    height: 52px;
  }

  /* On the smallest phones, keep the corner wash tight around each logo.
     The radial ellipse is reduced as well as its layer so the color still
     reaches full transparency before the pseudo-element edge without
     spreading across the center event details. */
  .gameday-header::before,
  .gameday-header::after {
    width: 132px;
    height: 70px;
  }

  .gameday-header::before {
    background: radial-gradient(
      ellipse 112px 54px at top left,
      color-mix(in srgb, var(--opponent-color, #8b1b3f) 40%, transparent) 0%,
      color-mix(in srgb, var(--opponent-color, #8b1b3f) 20%, transparent) 30%,
      color-mix(in srgb, var(--opponent-color, #8b1b3f) 7%, transparent) 56%,
      color-mix(in srgb, var(--opponent-color, #8b1b3f) 2%, transparent) 76%,
      transparent 100%
    );
  }

  .gameday-header::after {
    background: radial-gradient(
      ellipse 112px 54px at top right,
      color-mix(in srgb, var(--jbu-color, #124e84) 40%, transparent) 0%,
      color-mix(in srgb, var(--jbu-color, #124e84) 20%, transparent) 30%,
      color-mix(in srgb, var(--jbu-color, #124e84) 7%, transparent) 56%,
      color-mix(in srgb, var(--jbu-color, #124e84) 2%, transparent) 76%,
      transparent 100%
    );
  }

  .scoreboard-match-score-opponent {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .scoreboard-live-center {
    display: contents;
  }

  .scoreboard-state {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  .scoreboard-match-score-jbu {
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .scoreboard-match-score {
    font-size: 2.05rem;
  }

  .scoreboard-match-score-opponent.is-winner::after {
    right: -7px;
  }

  .scoreboard-match-score-jbu.is-winner::before {
    left: -7px;
  }

  .scoreboard-linescore {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    padding: 9px 8px 8px;
    border-top: 1px solid #d7dadd;
    grid-template-columns: 10px minmax(38px, auto) repeat(5, minmax(22px, 1fr));
    column-gap: 2px;
    font-size: 0.68rem;
  }

  .linescore-gutter {
    width: 10px;
  }

  /* Pregame uses the same compact top row: logo, centered event details, logo. */
  .scoreboard-pregame {
    grid-column: 2 / 5;
    grid-row: 1;
    min-height: 54px;
    padding: 0;
    align-self: center;
  }

  .scoreboard-pregame-date {
    font-size: 0.8rem;
  }

  .scoreboard-pregame-time {
    font-size: 0.7rem;
  }

  .scoreboard-pregame-broadcast {
    margin-top: 5px;
    font-size: 0.62rem;
  }

  .gameday-team-nav {
    display: none;
  }
}


/* Latest News RSS Feed */
.news-container {
  order: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0 auto 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 8px 24px rgba(22, 19, 19, 0.08);
}

@media only screen and (min-width: 1074px) {
  .news-container {
    order: 2;
    width: 26%;
    min-height: 0;
    margin: 0 0 0 15px;
  }
}

.rss-news-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8c4cf transparent;
  background: #f5f7f9;
}

.rss-news-feed::-webkit-scrollbar {
  width: 7px;
}

.rss-news-feed::-webkit-scrollbar-track {
  background: transparent;
}

.rss-news-feed::-webkit-scrollbar-thumb {
  background: #b8c4cf;
  border-radius: 999px;
}

.rss-news-item {
  position: relative;
  margin: 0;
  background: #ffffff;
  border-bottom: 1px solid #e6e9ec;
}

.rss-news-link,
.rss-news-link:link,
.rss-news-link:visited {
  display: flex;
  gap: 12px;
  padding: 16px;
  color: #161313;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.rss-news-link:hover {
  background: #f8fbfe;
}

.rss-news-link:focus-visible {
  outline: 3px solid #f9ca24;
  outline-offset: -3px;
}

.rss-news-image {
  flex: 0 0 104px;
  width: 104px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8edf2;
}

.rss-news-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.25s ease;
}

.rss-news-link:hover .rss-news-image img {
  transform: translateY(-4px);
}

.rss-news-body {
  flex: 1 1 auto;
  min-width: 0;
}

.rss-news-date {
  display: block;
  margin: 0 0 5px;
  color: #66717c;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rss-news-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #161313;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rss-news-excerpt {
  display: none;
  margin: 7px 0 0;
  overflow: hidden;
  color: rgba(22, 19, 19, 0.76);
  font-family: "Roboto", sans-serif !important;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rss-news-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #124e84;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rss-news-read i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.rss-news-link:hover .rss-news-read i {
  transform: translateX(3px);
}

.rss-news-footer,
.rss-news-footer:link,
.rss-news-footer:visited {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  background: #124e84;
  color: #ffffff;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rss-news-footer:hover {
  background: #0f4270;
  color: #ffffff;
}

.rss-news-footer i {
  transition: transform 0.2s ease;
}

.rss-news-footer:hover i {
  transform: translateX(3px);
}

.rss-news-status {
  display: flex;
  min-height: 180px;
  padding: 28px 20px;
  align-items: center;
  justify-content: center;
  color: #5f6973;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem;
  text-align: center;
}

.rss-news-error {
  flex-direction: column;
  gap: 7px;
}

.rss-news-error strong {
  color: #161313;
  font-family: "Roboto", sans-serif !important;
}

.rss-news-error span {
  max-width: 240px;
  font-family: "Roboto", sans-serif !important;
  line-height: 1.45;
}

@media only screen and (max-width: 1073px) {
  .news-container {
    height: auto !important;
  }

  .rss-news-feed {
    max-height: 560px;
  }

  .rss-news-excerpt {
    display: -webkit-box;
  }
}

@media only screen and (max-width: 767px) {
  .rss-news-read {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .rss-news-link {
    padding: 14px;
  }

  .rss-news-image {
    flex-basis: 92px;
    width: 92px;
  }

  .rss-news-title {
    font-size: 0.9rem;
  }

  .rss-news-excerpt {
    font-size: 0.8rem;
  }
}

/* Video Embed */
.video-container {
  order: 2;
  width: 100%;
}


@media only screen and (min-width: 1074px) {
  .video-container {
    order: 3;
    width: 70%;
    margin-right: 15px;
  }
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  background-color: #000;
  overflow: hidden;
}

.video-container .video-embed iframe,
.video-container .video-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container .video-embed video {
  display: block;
  background-color: #000;
  object-fit: contain;
}

/* Urban Edge Player Loading / Error Message */
.gameday-dashboard .uen-player-message {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  padding: 24px;

  background-color: #000;
  color: #fff;

  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.gameday-dashboard .uen-player-message.is-hidden {
  display: none;
}

/* Video Picture in Picture */
@keyframes fade-in-up {
  0% {
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media only screen and (min-width: 768px) {
  .gameday-dashboard .video-container .stuck {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 375px;
    height: 211px;
    padding-bottom: 0;
    z-index: 100;
    box-shadow: 8px 8px 12px -6px rgba(0, 0, 0, 0.5);

    transform: translateY(100%);
    animation: fade-in-up 0.25s ease forwards;
  }
}

/* Buttons Under Video */
.button-header {
  width: 100%;
  max-width: 1416px;
  margin: auto;
}

.button-subheader {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1020px;
  margin: auto;
}

.button-subheader .button-sub-btn {
  display: flex;
  align-items: center;
  border: 2px solid lightgrey;
  text-decoration: none;
  width: calc(33.33% - 20px);
  text-align: center;
  padding: 10px;
  margin: 10px;
  justify-content: center;
  text-transform: uppercase;
  font-size: 1.1rem !important;
  font-weight: 300;
  color: #124e84;
  transition: 0.3s;
}

.button-subheader i {
  margin-right: 10px;
}

.button-subheader .button-sub-btn:hover {
  color: #fff;
  background-color: #124e84;
  border: 2px solid #1b76c7;
}

@media screen and (max-width: 767px) {
  .button-subheader .button-sub-btn {
    width: 100%;
  }
}

/*     Section Two - Stats
_________________________*/

.section-two {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* Stat Embed */
.stat-container {
  width: 100%;
  margin-top: 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.stats-sponsor {
  max-width: 120px;
  vertical-align: middle;
}

@media only screen and (max-width: 559px) {
  .stats-sponsor {
    display: none !important;
  }

  .section-two .section-header.full-size {
    font-size: 1.5rem;
    padding: 8px 10px 8px 12px;
  }
}

.fa-window-restore {
  color: white;
  font-size: 24px;
  vertical-align: 3px;
  margin-right: 15px;
}

.fa-expand {
  color: white;
  font-size: 24px;
  vertical-align: 3px;
  margin-right: 15px;
}

.stats-new-window {
  float: right;
  cursor: pointer;
}

.section-two i {
  opacity: 0.8;
  transition-duration: 0.25s;
}

.section-two i:hover {
  opacity: 1;
}

@media only screen and (max-width: 439px) {
  .stats-new-window {
    display: none;
  }
}

@media only screen and (min-width: 1074px) {
  .stat-container {
    width: 100%;
    margin-top: 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.stat-embed {
  position: relative;
  height: 85vh;
}

.stat-container .stat-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Standings Embed */
.standings-container {
  width: 80%;
  margin: 24px auto 0;
  background-color: #eeeef0;
}

@media only screen and (min-width: 1074px) {
  .standings-container {
    width: 26%;
    margin: 0 15px 0 0;
  }
}

.standings-embed {
  height: calc(85vh - 52px);
  overflow: hidden;
  border: 1px solid #d9d9d9;
}

/*     Section Three - Photo Wall
_________________________*/

.photowall-container {
  overflow: auto;
  margin: 12px 0 0;
}

/* Override Curator.io style */
.photowall-container .crt-logo {
  display: none !important;
}

.photowall-container .crt-widget {
  background-color: unset;
  padding-bottom: 1px !important;
}

.photowall-container .crt-widget .crt-post {
  border-width: 0;
}

/*     Section Four - Grid of Cards
_________________________*/

.grid-container {
  text-align: center;
}

@media (min-width: 768px) {
  .grid-container,
  .grid-content_row {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    -webkit-align-items: stretch;
  }
}

@media (min-width: 1074px) {
  .grid-container,
  .grid-content_row {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    -webkit-align-items: stretch;
    justify-content: center;
    -webkit-justify-content: center;
  }
}

/* A row of grid content */
.grid-content_row {
  width: 100%;
}

/* Each Item in a grid container or a grid content group */
.grid-content_item {
  padding: 0;
  border: 0;
  width: 100%;
  min-width: 1px;
  min-height: 1px;

  margin: 0 0% 2%;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 768px) {
  .grid-content_item {
    width: calc(33.333% - 2%);
    margin: 0 1% 2%;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
  }
}

/* Card image viewport: clips the zoom to the image area only. */
.grid-content_item > a {
  display: block;
  overflow: hidden;
}

.grid-content_item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  box-shadow: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.35s ease;
}

.grid-content_item > a:hover img {
  transform: scale(1.035);
}

/*     Section Five - Social Media and Newsletter Signup 
_________________________*/

.social-container {
  display: flex;
  display: -webkit-flex;
  width: 100%;
}

@media only screen and (min-width: 1074px) {
  .social-container {
    width: 35%;
    margin: 0 auto 0px;
    border: none;
  }
}

.social-icon {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  min-width: 1px;
  min-height: 1px;
  width: 25%;
  display: flex;
  display: -webkit-flex;
  border: none;
}

.social-icon a {
  display: block;
  width: 100%;
  height: 59px;
  line-height: 59px;
  text-align: center;
  text-decoration: none;
  color: #124e84;
  transition: 0.2s;
}

.social-icon i {
  font-size: 45px;
  transition: filter 0.3s ease;
}

.social-icon:hover i {
  transition: filter 0.3s ease;
  filter: brightness(150%);
}

.social-icon span {
  position: absolute;
  top: -99999px;
  left: -99999px;
  display: block;
  color: white;
  background-color: black;
}

/* Newsletter Signup */
.more-info-container {
  max-width: 850px;
  margin: 40px auto 60px;
  border-radius: 12px;
  width: auto;
  box-shadow: 0 1px 4px #ccc;
  transition: box-shadow 0.2s ease;
  background-color: white;
}

.more-info-content {
  padding: 4% 2% 4%;
  margin: 0;
}

.more-info-description {
  font-size: 1.6rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.3;
  color: #1a1a1a;
  text-align: center;
  margin: 0 9% 0;
  font-family: "Roboto", sans-serif;
}

a.email {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 auto 0;
  display: inline-block;
  padding: 7.5px 15%;
  float: none;
  align-items: center;
  border: 2px solid #124e84;
  text-decoration: none;
  justify-content: center;
  text-transform: uppercase;
  color: #124e84;
  transition: 0.5s;
}

a.email:hover {
  color: #1b76c7;
  border: 2px solid #1b76c7;
}

.fa-envelope {
  margin-left: 10px;
  font-size: 1.4rem;
}

/* Footer */
.footer {
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer p {
  font-style: italic;
  font-family: "Roboto", sans-serif;
  text-align: center;
}

.footer a {
  color: #124e84;
  text-decoration: none;
  background: transparent;
  font-size: 12px;
  margin: 0 auto;
  padding: 10px 6%;
  transition-duration: 0.3s;
}

.footer a:hover {
  background-color: rgba(18, 78, 132, 0.2);
}

.fa-arrow-up-to-line {
  margin-right: 5px;
}

img.footer-logo:hover {
  animation-name: heartbeat;
  animation-duration: 300ms;
  transform-origin: 50% 50%;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  -webkit-animation-name: heartbeat;
  -webkit-animation-duration: 300ms;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-timing-function: linear;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}